<style lang="stylus">
.film-list
  min-height 100%
  overflow hidden
  padding-bottom 120px
  padding-top 420px
  .top
    position fixed
    top 0
    width 100%
    z-index 5
    background-color #fff
    max-width 750px;/*no*/
    margin 0 auto
  .search-icon
    width 60px
    height 33px
    background url("../assets/search/icon_search.png") no-repeat center
    background-size 32px 100%
  .tags
    flex-wrap nowrap
    overflow-x scroll
  .tag
    padding 0 22px
    background-color transparent
    line-height 50px
    border-radius 25px
    text-align center
    &.four
      min-width 165px
    &.three
      min-width 130px
    &.two
      min-width 110px
    &.active
      color #5141c1
      background-color #e9e9e9
</style>

<template lang="pug">
.film-list
  .top
    title-bar(:title="title")
      .search-icon.pdr-40(@click="onLinkPage('search')")
    .tags.flex.mgt-26.pdl-20.fz-28(v-if="criteria.sorts.length")
      .tag(v-for="(sort, index) in criteria.sorts", :key="index",
      :class="{active: sortKey === sort.key, two: sort.value.length === 2, three: sort.value.length === 3, four: sort.value.length === 4}", @click="onSelectSort(sort.key)") {{sort.value}}
    .flex.pdt-26.pdl-20.fz-28
      .tag.four(@click="onSelectArea('')", :class="{active: areaKey === ''}") 全部地区
      .tags.flex(v-if="criteria.areas.length")
        .tag(v-for="(area, index) in criteria.areas", :key="index",
        :class="{active: areaKey === area.key, two: area.value.length === 2, three: area.value.length === 3, four: area.value.length === 4}", @click="onSelectArea(area.key)") {{area.value}}
    .flex.pdt-26.pdl-20.pdb-40.fz-28
      .tag.four(@click="onSelectCategory('')", :class="{active: categoryKey === ''}") 全部分类
      .tags.flex(v-if="criteria.categorys.length")
        .tag(v-for="(category, index) in criteria.categorys", :key="index",
        :class="{active: categoryKey === category.key, two: category.value.length === 2, three: category.value.length === 3, four: category.value.length === 4}", @click="onSelectCategory(category.key)") {{category.value}}
  .mgt-36.flex.flex-wrap
    film-card(v-for="(film, index) in items", :key="film.movieId || film.id", :film="formatFilm(film)", :index="index")
  .loading-more.center.fz-30.pdv-20(v-show="showMoreLoading") 加载中...
  no-more(v-if="!hasMore && items.length")
  .empty-data(v-if="loadDone && !items.length")
</template>

<script>
import TitleBar from '../components/TitleBar.vue'
import FilmCard from '../components/FilmCard.vue'

import paging from '../mixin/paging'

export default {
  name: 'film-list',
  components: { TitleBar, FilmCard },
  mixins: [paging],
  data() {
    return {
      title: '',
      criteria: {
        sorts: [],
        areas: [],
        categorys: []
      },
      sortKey: '',
      areaKey: '',
      categoryKey: '',
      channels: ''
    }
  },

  mounted() {
    const { channel, title } = this.$route.query

    this.channels = channel
    this.title = title

    this.$get('movie/search/criteria').then(criteria => {
      this.criteria = criteria
      this.sortKey = criteria.sorts[0].key
      this.fetch()
    })
  },

  computed: {
    paging() {
      return {
        path: 'movie/search',
        params: {
          sort: this.sortKey,
          areas: this.areaKey,
          categorys: this.categoryKey,
          channels: this.channels
        }
      }
    }
  },

  methods: {
    onSelectSort(key) {
      this.sortKey = key
      this.fetch()
    },

    onSelectArea(key) {
      this.areaKey = key
      this.fetch()
    },

    onSelectCategory(key) {
      this.categoryKey = key
      this.fetch()
    },

    formatFilm(film) {
      return { ...film, data: film }
    }
  }
}
</script>

